<template>
  <div class="app-container">
    <recommend-display :list="list" @choose="handleChoose" @dislike="handleDislike" />
    <page :current.sync="current" :size="size" :total="total" />
  </div>
</template>

<script>
import RecommendDisplay from '@/views/components/RecommendDisplay'
import Page from '@/views/components/Page'
import { choose, page_recommend } from '@/api/course'

export default {
  name: 'Recommend',
  components: { RecommendDisplay, Page },
  data() {
    return {
      current: 1,
      size: 10,
      total: 0,
      list: []
    }
  },
  watch: {
    current: {
      immediate: true,
      handler(newVal) {
        this.current = newVal
        this.handleCommon()
      }
    }
  },
  methods: {
    handleCommon() {
      page_recommend({ current: this.current, size: this.size }).then(res => {
        const { code, data } = res
        if (code === 20000) {
          this.total = data.total
          this.list = data.records
        }
      }).catch(err => this.$message.error(err))
    },
    handleChoose(uid) {
      choose(uid).then(res => {
        const { code, msg } = res
        if (code === 20000) {
          this.$message.success(msg)
          this.handleCommon()
        } else {
          this.$message.error(msg)
        }
      }).catch(err => this.$message.error(err))
    },
    handleDislike(uid) {
      this.$message.info('Selected: ' + uid + ', The function will be implemented in the future')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }

  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
